<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="课程名称" prop="courseId">
        <el-select v-model="queryParams.courseId" placeholder="请选择课程" clearable>
          <el-option v-for="item in courseSelectList" :key="item.courseId" :label="item.courseName"
            :value="item.courseId" />
        </el-select>
      </el-form-item>
      <el-form-item label="章名称" prop="chapterName">
        <el-input v-model="queryParams.chapterName" placeholder="请输入章名称" clearable />
      </el-form-item>
      <el-form-item label="课时名称" prop="classTimeName">
        <el-input v-model="queryParams.classTimeName" placeholder="请输入课时名称" clearable />
      </el-form-item>
      <el-form-item label="课节名称" prop="sectionName">
        <el-input v-model="queryParams.sectionName" placeholder="请输入课节名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          v-hasPermi="['course:couseTime:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['course:couseTime:remove']">删除</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="couseTimeList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="课程名称" align="center" prop="courseName" />
      <el-table-column label="章名称" align="center" prop="chapterName" />
      <el-table-column label="课节名称" align="center" prop="sectionName" />
      <el-table-column label="课时名称" align="center" prop="classTimeName" />
      <el-table-column label="视频" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="handleSeeVideo(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="视频时长(分钟)" align="center" prop="courseTimes" />
      <el-table-column label="上次观看时间" align="center" prop="maxDate" />
      <el-table-column label="观看总时长(分钟)" align="center" prop="allTime" />
      <el-table-column label="学习状态" align="center" prop="studyStatus" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['course:couseTime:edit']">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
            v-hasPermi="['course:couseTime:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改录播观看对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="couseTimeRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="课程名称" prop="courseId">
          <el-select style="width: 100%;" v-model="form.courseId" placeholder="请选择课程" clearable>
            <el-option v-for="item in courseSelectList" :key="item.courseId" :label="item.courseName"
              :value="item.courseId" />
          </el-select>
        </el-form-item>
        <el-form-item label="章名称" prop="chapterName">
          <el-input v-model="form.chapterName" placeholder="请输入章名称" />
        </el-form-item>
        <el-form-item label="课节名称" prop="sectionName">
          <el-input v-model="form.sectionName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="课时名称" prop="classTimeName">
          <el-input v-model="form.classTimeName" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item required label="视频" prop="videoId">
          <VideoUpload v-model="videoUrl" @change="handleVideoChange" />
        </el-form-item>
        <el-form-item required label="视频时长" prop="courseTimes">
          <el-input-number v-model="form.courseTimes" :controls="false" :min="0" :precision="2" /> 分钟
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <PlayVideo v-model:visible="showVideo" :time-id="seeTimeId" :play-url="selectUrl" />
  </div>
</template>

<script setup name="CouseTime">
import { listCouseTime, delCouseTime, addCouseTime, updateCouseTime } from "@/api/course/couseTime";
import { queryCourseList } from '@/api/home.js';
import PlayVideo from '../playVideo/index.vue';

const { proxy } = getCurrentInstance();
const courseSelectList = ref([])
const couseTimeList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const selectUrl = ref('')
const videoUrl = ref('')
const seeTimeId = ref(null)
const showVideo = ref(false)
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    courseId: null,
    chapterName: null,
    sectionName: null,
    classTimeName: null,
    sectionName: null
  },
  rules: {
    courseId: [
      { required: true, message: "请选择课程名称", trigger: "change" }
    ],
    chapterName: [
      { required: true, message: "请输入", trigger: "blur" }
    ],
    sectionName: [
      { required: true, message: "请输入", trigger: "blur" }
    ],
    classTimeName: [
      { required: true, message: "请输入", trigger: "blur" }
    ],
    courseTimes: [
      { required: true, message: "请输入", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询录播观看列表 */
function getList() {
  loading.value = true;
  listCouseTime(queryParams.value).then(response => {
    couseTimeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
const getCourseSelectList = async () => {
  try {
    const res = await queryCourseList()
    if (res.code === 200) {
      courseSelectList.value = res.rows
      console.log(res)
    }
    getList()
  } catch (error) {
    proxy.$modal.msgError(error);
  }
}
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    timeId: null,
    courseId: null,
    chapterName: null,
    sectionName: null,
    classTimeName: null,
    courseTimes: null,
    createBy: null,
    createTime: null,
    videoId: null
  };
  videoUrl.value = ''
  proxy.resetForm("couseTimeRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.timeId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加录播观看";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  form.value = Object.assign({}, row)
  form.value.courseId = `${form.value.courseId}`
  videoUrl.value = import.meta.env.VITE_APP_BASE_IMG_URL + row.videoPath
  open.value = true;
  title.value = "修改录播观看";

}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["couseTimeRef"].validate(valid => {
    if (valid) {
      if (form.value.timeId != null) {
        updateCouseTime(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addCouseTime(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _timeIds = row.timeId || ids.value;
  proxy.$modal.confirm('是否确认删除录播观看编号为"' + _timeIds + '"的数据项？').then(function () {
    return delCouseTime(_timeIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

/** 查看视频 */
const handleSeeVideo = (item) => {
  selectUrl.value = import.meta.env.VITE_APP_BASE_IMG_URL + item.videoPath
  seeTimeId.value = item.timeId
  showVideo.value = true
}
/** 上传删除视频 */
const handleVideoChange = (item) => {
  if (item.fileId && item.fileId != '') {
    form.value.videoId = item.fileId
  } else {
    form.value.videoId = null
  }
}

getCourseSelectList();
</script>